<template>
    <div>
       <header>
        <div class="topbar" @click="back">
            <div class="back">
                <img src="../../assets/images/icon-back.png" alt="">
            </div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#">
                        <img :src="list.url" alt="">
                    </a>
                </div>
            </div>      
        </div>
    </header>
    <main>
        <section class="goods">
            <p class="price">
                <b>
                    ￥{{list.price}}
                </b>
            </p>
            <p class="goodsname">
                {{list.title}}
            </p>
            <span>{{list.desc}}</span>
        </section>
        
    </main>
    <footer>
        <ul>
            <li>
                <img src="../../assets/images/icon-home.png" alt="">
                <span @click="$router.push('/home')">首页</span>
            </li>
            <li>
                <img src="../../assets/images/icon-cart.png" class="cart" alt="">
                <span @click="$router.push('/cart')">购物车</span>
                <span class="cartnum" v-show="totalMount != 0">{{totalMount}}</span>
            </li>
            <li>
                <a href="#" class="tocart" @click="showPopup">加入购物车</a>
                <a href="#" class="tobuy">立即购买</a>
            </li>
        </ul>
    </footer>
    <van-popup v-model="show" round position="bottom"  :style="{height:'70%'}">
        <div class="van_goods">
            <img :src="list.url" alt="">
            <div class="price">
                <b>￥{{list.price*num}}</b>
                <p class="goodsname">
                {{list.title}}
            </p>
            </div>
        </div>
        <div class="num"><span style="marginRight: 8rem; fontSize:.7rem; color:#000;">购买数量:</span>
            <button @click="num++">+</button>
            <span>  {{num}}  </span>
            <button @click="num>0 ? num-- : num">-</button>
        </div>
        <div class="button" @click="addcart()">确定</div>
    </van-popup>
    </div>
</template>
<script>
import axios from 'axios';
 import Swiper from "swiper";
 import {mapState} from 'vuex'
 import 'swiper/css/swiper.css';
 export default {
  props:['id'],
  data() {
    return {
      show: false,
      num:1,
      list:[]
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    back(){
        this.$router.go(-1);
        this.$destroy();
    },
    addcart() {
        let num = this.num
        let list = this.list
        this.$store.dispatch('cart',{
            num,
            list
        })
        setTimeout(()=>{
            this.$router.push('/cart')
        },0)
    }
  },
  computed:{
      ...mapState(['totalMount','totalPrice','cartData'])
  },
  updated() {
      localStorage.setItem('totalMount',this.totalMount)
      localStorage.setItem('totalPrice',this.totalPrice)
      localStorage.setItem('cartData',JSON.stringify(this.cartData))
  },
 mounted(){
   const swiper = new Swiper('.swiper-container', {
             speed:1000,// 动画切换速度
             //loop: true, //是否循环
            autoplay:{  //自动切换
                delay:2000  // 幻灯片停留时间
            },
        })
        let id = this.$route.query.id
        axios.get(`http://localhost:3000/xiaomi?id=${id}`).then(
            response => {
                this.list = response.data.list[0]
            },
            error =>{
                console.log('失败');
            }
        )
  },
  
 }
</script>
<style lang="scss" scoped>
    @import '../../assets/css/detail.scss';
    .num{
        margin-top: .5333rem;
        margin-left: .5333rem;
    }
    .num button{
        width: 1.0667rem;
    }
    footer .cartnum{
        position: absolute;
        left: 100px;
    }
    .goods {
        margin-left: .4rem;
    }
    .van_goods img {
        width: 9rem;
        
    }
</style>